<script>
export default {
  name: "NoticeBox",
  data(){
    return {
    isPlay: false,
    }
  },
  methods:{
    test(){
    if(event.type==='mouseenter'){
    this.isPlay = true;}else {
      this.isPlay = false;
    }
    }
  }
}
</script>

<template>

<div class=" mt-40 relative  flex justify-center" style="" @mouseenter="test" @mouseleave="test">
  <transition enter-active-class="animate__animated animate__fadeIn" ><img src="/背景图.jpg" class="shadow-2xl max-w-2/3 w-2/3 h-auto rounded-2xl border-gray-700/60 border-2  "  /></transition>
<!--  <transition enter-active-class="animate__animated animate__fadeInDownBig">-->
  <transition enter-active-class="animate__animated animate__fadeIn"leave-active-class="animate__animated animate__fadeOut">
    <div v-if="isPlay" class="bg-gray-600/50 h-full w-2/3 max-w-full text-center text-2xl text-white absolute top-0 flex items-center justify-center"><div class="animate__animated animate__rotateIn animate__slow text-2xl lg:text-6xl" style="font-family: 幼圆;">
      欢迎来到资源小站<br><br>
      在这里您可以分享视频图片以及音乐
    </div>
    </div>
  </transition>


<!--  </transition>-->
</div>



</template>

<style scoped>

</style>